Skip to content

Support NodeJS by adding exports key to package.json#17

Open
kylewlacy wants to merge 5 commits intomhsdesign:mainfrom
kylewlacy:patch-1
Open

Support NodeJS by adding exports key to package.json#17
kylewlacy wants to merge 5 commits intomhsdesign:mainfrom
kylewlacy:patch-1

Conversation

@kylewlacy
Copy link

@kylewlacy kylewlacy commented Feb 20, 2024

Currently, trying to import @mhsdesign/jit-browser/tailwindcss from a NodeJS project using ES Modules leads to a pretty cryptic error:

node:internal/modules/esm/resolve:213
  const resolvedOption = FSLegacyMainResolve(packageJsonUrlString, packageConfig.main, baseStringified);
                         ^

Error: Cannot find package '/some/project/node_modules/@mhsdesign/jit-browser-tailwindcss/package.json' imported from /some/project/index.mjs

I did some reading and found out this is because the package.json file doesn't list a NodeJS package entry point. Node either expects there to be a "main" field or "exports" field in package.json. Lots of packages have a "module" field, but Node doesn't use this (most bundlers support it though).

This PR adds the "exports" field to package.json, which is roughly equivalent to the "module" field, but is used by NodeJS.

@mhsdesign
Copy link
Owner

mhsdesign commented Feb 21, 2024

hi ;) Thanks for digging into it and providing a pr :D
I think to be totally on the safe side we should also export then into commonjs as esbuild target. As the current file you used may contain esm specifics (probably not right now because this thing worked?) but still ...

So duplicating

jit-browser-tailwindcss/build.js

Lines 95 to 108 in 41437e8

// MODULE
build({
entryPoints: {'module.esm': 'builds/module.ts'},
bundle: true,
external: [...Object.keys({ ...pkg.dependencies, ...pkg.peerDependencies }).filter(
// We only want to include tailwindcss as an external dependency for its types.
(name) => name !== 'tailwindcss',
), ...externalDependenciesHack],
logLevel: 'info',
outdir: 'dist',
sourcemap: true,
format: 'esm',
...sharedConfig
});

and changing the target / creating a new output file in cjs should do https://esbuild.github.io/api/#format-commonjs?

Also as written here https://esbuild.github.io/api/#main-fields
we should probably use main for cjs and keep the module for esm?

@kylewlacy
Copy link
Author

kylewlacy commented Feb 21, 2024

At least for my use case, I'm trying to specifically use ES Modules with NodeJS, but I can update this PR to support CommonJS as well if you think that's beneficial. I found this SO answer that explains it pretty well: https://stackoverflow.com/a/75348391

I'll spend some time updating this PR when I have a chance.

@kylewlacy
Copy link
Author

kylewlacy commented Mar 1, 2024

@mhsdesign Alright, done! I tweaked the esbuild script so it now builds a CommonJS file as well, then I tried testing it out briefly and it seemed like it worked. I also tweaked the ES Module export, since I realized TypeScript wasn't finding the module declaration unless some extra stuff was added to the exports key

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@kylewlacy @mhsdesign